<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>06_数据劫持-数据绑定</title>
  <!--
    数据绑定
      更新data中的属性数据==>页面自动更新
  -->
</head>
<body>
    <div id="test">
      
      <p>{{name}}</p>  <!-- watch1 -->
      <p v-text="name"></p> <!-- watcher2 -->
      <p v-text="wife.name"></p> <!-- watcher3 -->

      <button v-on:click="update">更新</button>
    </div>
  
    <script src="./js/mvvm/compile.js"></script>
    <script src="./js/mvvm/mvvm.js"></script>
    <script src="./js/mvvm/observer.js"></script>
    <script src="./js/mvvm/watcher.js"></script>
    <script>
      new MVVM({
        el: '#test',
        data: {
          name: 'tom',   // dep_1
          wife: { // dep_2
            name: 'marry',  // dep_3
            age: 20 // dep_4
          }
        },
        methods: {
          update () {
            // 更新数据
            this.name = 'tome2'
            // this.wife.name = 'marry2'
            // this.wife.age = 34
          }
        }
      })
    </script>
</body>

</html>
